// 定义懒加载插件
import { useIntersectionObserver } from '@vueuse/core'

export const lazyPlugin = {
  install(app){
    // 懒加载指令逻辑
    app.directive('img-lazy',{
      mounted(el,binding){
        // el:指令绑定的元素 
        // binding:vinding.value  指令等于号后面绑定的表达式的值  图片url
        console.log(el,binding.value);
         const {stop} = useIntersectionObserver(
          el,
          // isIntersecting 是否进入可视区 布尔值
          ([{isIntersecting}]) => {
            console.log(isIntersecting);
            if(isIntersecting){
              // 进入了视口区域
              el.src = binding.value
              stop()
            }
          },
        )
      }
    })
  }
}